<template>
	<section v-horizontal-screen @touchmove.prevent>
		<!-- 页面具体内容 -->
		<slot>
			<view class="warp">
				<!-- 地图盒子 -->
				<img class="warp-map" src="https://img1.baidu.com/it/u=2315471513,2664532212&fm=26&fmt=auto&gp=0.jpg">
				<!-- 地图盒子 -->
				<view class="warp-nav">
					<view class="warp-nav-item" :class="navIndex == 1 ? 'warp-nav-item-active' : ''" @tap="handleNavClick(1)">
						<img class="warp-nav-item-icon" :src="navIndex == 1 ? '../../../static/images/nav/app-yingyong-sel.png' : '../../../static/images/nav/app-yingyong-nor.png'">
						<view class="warp-nav-item-text">应用</view>
					</view>
					<view class="warp-nav-item" :class="navIndex == 2 ? 'warp-nav-item-active' : ''" @tap="handleNavClick(2)">
						<img class="warp-nav-item-icon" :src="navIndex == 2 ? '../../../static/images/nav/app-tuceng-sel.png' : '../../../static/images/nav/app-tuceng-nor.png'">
						<view class="warp-nav-item-text">图层</view>
					</view>
					<view class="warp-nav-item" :class="navIndex == 3 ? 'warp-nav-item-active' : ''" @tap="handleNavClick(3)">
						<img class="warp-nav-item-icon" :src="navIndex == 3 ? '../../../static/images/nav/app-wode-sel.png' : '../../../static/images/nav/app-wode-nor.png'">
						<view class="warp-nav-item-text">我的</view>
					</view>
				</view>
				<!-- 应用 -->
				<view class="warp-appli" v-if="navIndex == 1">
					<view class="warp-appli-title">
						<view class="warp-appli-title-text">应用列表</view>
						<u-icon name="close" color="#ffffff" @tap="handleClosePopUp"></u-icon>
					</view>
					<view id="warp-appli-scroll" ref="warpAppliScroll">
						<view class="warp-appli-ul">
							<view class="warp-appli-li" v-for="(item, index) in applicationList" :key="index">
								<img class="warp-appli-li-img" src="">
								<view class="warp-appli-li-text">应用一</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 图层 -->
				<view class="warp-layer" v-if="navIndex == 2">
					<view id="warp-layer-scroll" ref="warpLayerScroll">
						<tree-node :dataList="layerList" @handleSwitchChangePrant="handleSwitchChange" @handleRefreshScroll="handleRefreshScroll"></tree-node>
					</view>
				</view>
				<!-- 我的 -->
				<view class="warp-mine" v-if="navIndex == 3">
					<view class="warp-mine-title">
						<view class="warp-mine-title-text">用户信息</view>
						<u-icon name="close" color="#ffffff" @tap="handleClosePopUp"></u-icon>
					</view>
					<view id="warp-mine-scroll" ref="warpMineScroll">
						<view class="warp-mine-ul">
							<view class="warp-mine-item" @tap="handleMineClick('av')">
								<view class="warp-mine-item-title">头像</view>
								<img class="warp-mine-item-av" src="">
							</view>
							<view class="warp-mine-item">
								<view class="warp-mine-item-title">用户名</view>
								<view class="warp-mine-item-info">123456789</view>
							</view>
							<view class="warp-mine-item">
								<view class="warp-mine-item-title">邮箱</view>
								<view class="warp-mine-item-info">12345@qq.com</view>
							</view>
							<view class="warp-mine-item">
								<view class="warp-mine-item-title">手机号</view>
								<view class="warp-mine-item-info">18788888888</view>
							</view>
							<view class="warp-mine-item" @tap="handleMineClick('pw')">
								<view class="warp-mine-item-title">修改密码</view>
								<u-icon name="arrow-right" color="#636363" size="28"></u-icon>
							</view>
							<view class="warp-mine-btn-box">
								<u-button class="warp-mine-btn" type="error" @tap="handleLogout">退出登录</u-button>
							</view>
						</view>
					</view>
				</view>
				<view class="warp-telecontrol"><telecontrol :telecontrolTime="telecontrolTime" @handleChangeTelecontrol="handleChangeTelecontrol" /></view>
				
				<!-- 提示-可删除 -->
				<view class="warp-hint">{{hint}}</view>
				<!-- 提示-可删除 -->
			</view>
		</slot>
	</section>
</template>

<script>
	import IScroll from '../../../libs/iscroll.js'
	import telecontrol from '../../../components/telecontrol/index.vue'
	import treeNode from '../../../components/tree-node/tree-node.vue'
	export default {
		components: { telecontrol, treeNode },
		data() {
			return {
				hint:'0', //提示文字-可删除
				telecontrol: 0, //可删除
				
				telecontrolTime: 1000, //长按和拖拽后监控调整角度的时间间隔，默认1秒
				navIndex:0, //点击navitem切换
				applicationList:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16], //应用列表
				layerList: [
					{
						id: 1,
						name: '宝石花',
						level: 1,
						showCity: true,
						childList: [
							{
								id: 2,
								name: '西仪项目部',
								level: 2,
								showCity: true,
								childList: [
									{
										id: 3,
										name: '劳动路小区',
										level: 3,
										showCity: true,
										childList: [
											{
												id: 4,
												name: '三维模型',
												level: 4,
												switch: false,
												childList: []
											},
											{
												id: 5,
												name: '点状管线设施',
												level: 4,
												switch: false,
												childList: []
											},
											{
												id: 6,
												name: '点状植被',
												level: 4,
												switch: false,
												childList: []
											},
											{
												id: 7,
												name: '其他点状设施',
												level: 4,
												switch: false,
												childList: []
											},
											{
												id: 8,
												name: '硬化',
												level: 4,
												switch: false,
												childList: []
											},
											{
												id: 9,
												name: '面状植被',
												level: 4,
												switch: false,
												childList: []
											}
										]
									}
								]
							}
						]
					}
				], //图层列表
			}
		},
		mounted() {
			
		},
		methods:{
			
			/*
			*  可用回调
			*/
		 
			 //修改密码&头像
			 handleMineClick: function(e) {
				if(e == 'av') {
					this.hint = '准备修改头像';
				} else if(e == 'pw') {
					this.hint = '准备修改密码';
				}
			 },
			 //图层switch被触发时
			 handleSwitchChange: function(event, obj) {
				this.hint = obj.name + ' ' + event;
			 },
			 //遥控改变回调
			 handleChangeTelecontrol: function(e) {
				this.telecontrol += 1
				this.hint = e + '  ' + this.telecontrol
			 },
			 //退出登录
			 handleLogout: function() {
				this.$mff.goPage('/login/index', 5)
			 },
			 
			
			
			
			
			
			
			//navItem点击
			handleNavClick: function(index) {
				this.navIndex = (this.navIndex == index) ? 0 : index
				if(this.navIndex == 1) {
					//定时器作用为了获取到生成的dom节点。。 勿删除
					setTimeout(() =>{
						new IScroll(this.$refs.warpAppliScroll.$el)
					})
				} else if(this.navIndex == 2) {
					//定时器作用为了获取到生成的dom节点。。 勿删除
					setTimeout(() =>{
						new IScroll(this.$refs.warpLayerScroll.$el)
					})
				} else if(this.navIndex == 3) {
					//定时器作用为了获取到生成的dom节点。。 勿删除
					setTimeout(() =>{
						new IScroll(this.$refs.warpMineScroll.$el)
					})
				}
			},
			//刷新列表
			handleRefreshScroll: function() {
				//定时器作用为了获取到生成的dom节点。。 勿删除
				setTimeout(() =>{
					new IScroll(this.$refs.warpLayerScroll.$el)
				})
			},
			//关闭弹窗
			handleClosePopUp: function() {
				this.navIndex = 0
			},
		},
		
		//移动端横屏重要代码，勿动
		directives: {
        'horizontal-screen': {
            bind(el, binding, vnode){
                let self = vnode.context;
                
                function reset(init){
                    
                    let width = document.documentElement.clientWidth,
                        height = document.documentElement.clientHeight;
                    //在竖屏状态我们通过添加transform:rotate(90deg)，来让这个页面横过来
                    if(window.orientation == null || window.orientation === 180 || window.orientation === 0){//竖屏状态
                        el.style.webkitTransform = el.style.transform = `rotate(90deg)`;
                        el.style.width = `${height}px`;
                        el.style.height = `${width}px`;
                        el.style.webkitTransformOrigin = el.style.transformOrigin = `${width / 2}px center`;
                        //如果已经处于横屏状态就不做其他处理了
                    }else if(window.orientation === 90 || window.orientation === -90){//横屏状态
                        el.style.webkitTransform = el.style.transform = `rotate(0)`;
                        el.style.width = `${width}px`;
                        el.style.height = `${height}px`;
                    }
                }
                reset(true);

                let timer = null;
                el.fn = function(e) {
                    clearTimeout(timer);
                    timer = setTimeout(reset, 300);
                }
                
                window.addEventListener('resize', el.fn, false);

                if("onorientationchange" in window){
                    window.addEventListener('orientationchange', el.fn, false);
                }
            },
            unbind(el, binding, vnode){
                window.removeEventListener('resize', el.fn, false);
                window.removeEventListener('orientationchange', el.fn, false);
            }
        },
    }
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>
